<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <title>登录界面 </title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    <link href="../../../resources/login/css/font-awesome.min.css" th:href="@{/resources/login/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../../../resources/login/css/bootstrap.min.css" th:href="@{/resources/login/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../../../resources/login/css/bootstrap-theme.min.css" th:href="@{/resources/login/css/bootstrap-theme.min.css}" rel="stylesheet" type="text/css"/>
    <link href="../../../resources/login/css/templatemo_style.css" th:href="@{/resources/login/css/templatemo_style.css}" rel="stylesheet" type="text/css"/>
</head>
<body class="templatemo-bg-gray">
<!--<h1 id="h1" style="color:#000; margin-top:100px;">店铺销售系统登录</h1>-->

<h1 th:if="${userType} == 1" style="color:#000; margin-top:100px;">管理员登录</h1>
<h1 th:if="${userType} == 2" style="color:#000; margin-top:100px;">库存管理员登录</h1>
<h1 th:if="${userType} == 3" style="color:#000; margin-top:100px;">收银员登录</h1>

<div class="container">
    <div class="col-md-12">
        <form class="form-horizontal templatemo-container templatemo-login-form-1 margin-bottom-30" action="/login/login" method="post" th:action="@{/login/login}">
            <div class="form-group">
                <div class="col-xs-12">
                    <div class="control-wrapper">
                        <label for="userName" class="control-label fa-label"><i
                                class="fa fa-user fa-medium"></i></label>
                        <input type="text" id="userName" class="form-control" name="name" th:value="${name}" placeholder="Username"/>
                        <label id="loginError" style="margin-top:5px;color:#E02222;display:none">登录名称含有非法字符或长度不是6-13！</label>
                        <input type="text" id="userType" th:attr="value=${userType}" name="userType" style="display:none"/>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <div class="control-wrapper">
                        <label for="userPassword" class="control-label fa-label"><i
                                class="fa fa-lock fa-medium"></i></label>
                        <input type="password" id="userPassword" class="form-control" name="password" th:value="${password}"
                               placeholder="Password"/>
                        <label id="passWordError" style="margin-top:5px;color:#E02222;display:none">密码至少6位！</label>
                    </div>
                </div>
            </div>
            <div class="control-wrapper" style="text-align:center"><label id="l_error" style="color:#E02222" th:text="${error}"></label></div>

            <div class="form-group">
                <div class="col-md-12">
                    <div class="checkbox control-wrapper">
                        <label>
                            <input type="checkbox" id="rememberMe" name="rememberMe"/> 记住账号
                        </label>
                        <a href="forgotPassword.html" class="text-right pull-right"
                           style="text-decoration:underline;color:red">密码忘记了?</a>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-md-12">
                    <div class="control-wrapper" style="text-align:center">
                        <input type="submit" id="loginButton" value="登录" class="btn btn-inverse"
                               style="width:250px;margin:auto;background-color:#E02222;color:#fff"/>
                    </div>
                </div>
            </div>
            <hr/>
            <div class="text-center">
                <a href="create-account.html" class="templatemo-create-new"
                   style="color:#000;float:right;color:#777;font-size:16px;margin-top:-10px">创建新账号 <i
                        class="fa fa-arrow-circle-o-right"></i></a>
            </div>
        </form>

    </div>
</div>
</body>
<script src="../../../resources/plugins/jquery-2.1.4.min.js" th:src="@{/resources/plugins/jquery-2.1.4.min.js}"></script>
<script type="text/javascript">
    // <![CDATA[
    $("#userName").change(function(){
        $("#l_error").text("");
        var inputName= $("#userName").val();
        var regLoginName = /^[\u0391-\uFFE5\w]{6,13}$/;
        if(regLoginName.test(inputName)){
            $("#loginButton").removeAttr("disabled");
            $("#loginError").css("display","none");
        }else{
            $("#loginButton").attr("disabled","true");
            $("#loginError").css("display","block");
        }

    });


    $("#userPassword").change(function(){
        $("#l_error").text("");
        var inputPassword= $("#userPassword").val();
        var regPassword = /^[\u0391-\uFFE5\w]{6,99}$/;
        if(regPassword.test(inputPassword)){
            $("#loginButton").removeAttr("disabled");
            $("#passWordError").css("display","none");
        }else{
            $("#loginButton").attr("disabled","true");
            $("#passWordError").css("display","block");
        }
    });
    // ]]>

</script>
</html>